<template>
    <div class="draggable-table-demo">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>表格拖拽排序演示</span>
            <el-button type="primary" @click="resetTable">重置表格</el-button>
          </div>
        </template>
        
        <draggable
          v-model="tableData"
          tag="tbody"
          :animation="150"
          handle=".drag-handle"
          item-key="id"
          @end="onDragEnd"
        >
            <template #header>
                <tr>
                <th width="50" align="center">排序</th>
                <th width="180">姓名</th>
                <th width="180">年龄</th>
                <th>地址</th>
                <th width="100" align="center">序号</th>
                </tr>
            </template>
          <template #item="{ element }">
            <tr class="el-table__row">
              <td class="el-table__cell" width="50" align="center">
                <el-icon class="drag-handle"><Rank /></el-icon>
              </td>
              <td class="el-table__cell" width="180">{{ element.name }}</td>
              <td class="el-table__cell" width="180">{{ element.age }}</td>
              <td class="el-table__cell">{{ element.address }}</td>
              <td class="el-table__cell" width="100" align="center">{{ element.sort }}</td>
            </tr>
          </template>
        </draggable>
  

     


        
        <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        >
                <el-table-column width="50" align="center">
          <template #default>
            <el-icon class="drag-handle"><Rank /></el-icon>
            
          </template>
        </el-table-column>
        
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        
        <el-table-column
          prop="age"
          label="年龄"
          width="180"
        />
        
        <el-table-column
          prop="address"
          label="地址"
        />
        
        <el-table-column
          prop="sort"
          label="排序"
          width="100"
          align="center"
        />
      </el-table>
        <draggable
        v-model="tableData"
        tag="tbody"
        :animation="150"
        handle=".drag-handle"
        item-key="id"
        @end="onDragEnd"
      >
        <template #item="{ element }">
          <tr class="el-table__row">
            <td class="el-table__cell" width="50" align="center">
              <el-icon class="drag-handle"><Rank /></el-icon>
            </td>
            <td class="el-table__cell" width="180">{{ element.name }}</td>
            <td class="el-table__cell" width="180">{{ element.age }}</td>
            <td class="el-table__cell">{{ element.address }}</td>
            <td class="el-table__cell" width="100" align="center">{{ element.sort }}</td>
          </tr>
        </template>
      </draggable>


 
        <div class="table-footer">
          <el-button type="success" @click="saveSort">保存排序</el-button>
        </div>

        <div class="table-container">
        <table class="draggable-table">
          <thead>
            <tr>
              <th width="50">排序</th>
              <th width="120">姓名</th>
              <th width="80">年龄</th>
              <th>地址</th>
              <th width="100">序号</th>
            </tr>
          </thead>
          <draggable
            v-model="tableData"
            tag="tbody"
            item-key="id"
            handle=".drag-handle"
            @end="onDragEnd"
          >
            <template #item="{ element }">
              <tr>
                <td> <span class="handle">☰</span>
                  <el-icon class="drag-handle"><Sort /></el-icon>
                </td>
                <td>{{ element.name }}</td>
                <td>{{ element.age }}</td>
                <td>{{ element.address }}</td>
                <td>{{ element.sort }}</td>
              </tr>
            </template>
          </draggable>
        </table>
      </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Rank } from '@element-plus/icons-vue'
  import draggable from 'vuedraggable'
  

      const items = ref([
    {
      id: 1,
      name: '张三',
      age: 25,
      address: '北京市朝阳区',
      sort: 1
    },
    {
      id: 2,
      name: '李四',
      age: 30,
      address: '上海市浦东新区',
      sort: 2
    },
    {
      id: 3,
      name: '王五',
      age: 28,
      address: '广州市天河区',
      sort: 3
    },
    {
      id: 4,
      name: '赵六',
      age: 35,
      address: '深圳市南山区',
      sort: 4
    },
    {
      id: 5,
      name: '钱七',
      age: 32,
      address: '杭州市西湖区',
      sort: 5
    }
  ])
  const    dragOptions= ref({
        animation: 200,
       ghostClass: 'ghost-item',
       chosenClass: 'chosen-item'
      })
  const tableData = ref([
    {
      id: 1,
      name: '张三',
      age: 25,
      address: '北京市朝阳区',
      sort: 1
    },
    {
      id: 2,
      name: '李四',
      age: 30,
      address: '上海市浦东新区',
      sort: 2
    },
    {
      id: 3,
      name: '王五',
      age: 28,
      address: '广州市天河区',
      sort: 3
    },
    {
      id: 4,
      name: '赵六',
      age: 35,
      address: '深圳市南山区',
      sort: 4
    },
    {
      id: 5,
      name: '钱七',
      age: 32,
      address: '杭州市西湖区',
      sort: 5
    }
  ])
  
  const originalData = ref([])
  
  onMounted(() => {
    // 保存原始数据用于重置
    originalData.value = JSON.parse(JSON.stringify(tableData.value))
  })
  
  const resetTable = () => {
    tableData.value = JSON.parse(JSON.stringify(originalData.value))
    ElMessage.success('表格已重置')
  }
  
  const onDragEnd = () => {
    // 拖拽结束后更新排序号
    tableData.value.forEach((item, index) => {
      item.sort = index + 1
    })
  }
  
  const saveSort = () => {
    ElMessage.success('排序已保存')
  }
  </script>
  
  <style scoped>
  .draggable-table-demo {
    padding: 20px;
  }
  
  .box-card {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .drag-handle {
    cursor: move;
    color: #909399;
  }
  
  .table-footer {
    margin-top: 20px;
    text-align: right;
  }
  
  :deep(.el-table__row) {
    cursor: move;
    background-color: #fff;
    border-bottom: 1px solid #EBEEF5;
  }
  
  :deep(.el-table__row:hover) {
    background-color: #f5f7fa;
  }
  
  :deep(.el-table__row.sortable-ghost) {
    background-color: #ecf5ff;
    opacity: 0.8;
  }
  
  :deep(.el-table__row.sortable-drag) {
    background-color: #f0f9eb;
  }
  
  :deep(.el-table__cell) {
    padding: 12px 0;
    text-align: center;
    border-right: 1px solid #EBEEF5;
  }
  
  :deep(.el-table__cell:last-child) {
    border-right: none;
  }
  
  :deep(.el-table__cell:first-child) {
    padding: 12px 0;
    text-align: center;
  }
  </style> 
  <style scoped>
  .container {
    max-width: 500px;
    margin: 0 auto;
  }
  .list-group {
    border: 1px solid #eee;
    border-radius: 4px;
  }
  .item {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: move;
  }
  .handle {
    cursor: move;
    color: #999;
  }
  .ghost-item {
    opacity: 0.5;
    background: #c8ebfb;
  }
  .chosen-item {
    background: #f0f0f0;
  }


  
.draggable-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}

.draggable-table th,
.draggable-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.draggable-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
  font-size: 14px;
}
  </style>